<script setup>
import Categorize from './Categorize.vue';
import { ref, reactive } from 'vue';
let games = reactive([
    { id: 1, name: '英雄联盟' },
    { id: 2, name: '绝地求生' },
    { id: 3, name: '守望先锋' },
    { id: 4, name: '绝地求生' },
    { id: 5, name: '守望先锋' },
])
const imageUrl = ref('http://122.51.49.25:19000/component-management-back-api/ffeeff4fefea4e0bbfe75c84f5ed32f2.jpeg')

//请给我一个视频的网络链接地址
const videoUrl = ref('http://122.51.49.25:19000/component-management-back-api/0d2ca74aeaf6427aa66a3d68eefb828e.mp4')

</script>

<template>
    <div class="myfather">
        <h2>我是父组件</h2>
        <div class="content">
            <Categorize :games="games" >
                <template v-slot:s2>
                    <ul>
                    <li v-for="item in games" :key="item.id">{{ item.name }}</li>
                </ul>
                </template>
                
                <template v-slot:s1>
                    <h3>今日游戏列表</h3>
                </template>
            </Categorize>
            <Categorize title="">
                <template v-slot:s2>
                    <img :src="imageUrl" alt="" style="width:100%">
                </template>
                <template v-slot:s1>
                    <h3>今日美食城市</h3>
                </template>
            </Categorize>
            <Categorize>
                <template #s1>
                    <h3>今日影视推荐</h3>
                </template>
                <template #s2>
                    <video :src="videoUrl" controls style="width:100%"></video>
                </template>
                
            </Categorize>
        </div>
    </div>
</template>

<style scoped>
.myfather {
    background-color: #10d294;
    padding: 10px;
    border: 1px solid rgb(176, 31, 123)
}

.content {
    display: flex;
    justify-content: space-evenly;
}

h3 {
    background-color: yellowgreen;
    text-align: center;
}
</style>